<template>
    <a-drawer width="100%" :visible="visible" :body-style="{ paddingBottom: '80px', background: '#f0f2f5' }"
        placement="right" :get-container="false"  :style="{ position: 'absolute'}"  :closable="false"
        :footer-style="{ textAlign: 'right' }">
        <a-card class="mb-2" >
            <a-row :gutter="24" style="padding: 0px;">
                <a-col :span="12" class="w-32 border-0    border-r border-dotted  border-gray-500">

                    <!-- <a-steps :current="2" class="mt-5 mb-5"  :style="stepStyle"  type="navigation">
                        <a-step v-for="item in progressOptions" :title="item.label" />
                    </a-steps> -->

                    <steps @onClose="onClose" :pro-id="info.proId"></steps>
                </a-col>
                <a-col :span="12">
                    <a-row :gutter="24">
                        <a-col :span="20" class="text-center">
                            <div class=" mb-2 text-left font-semibold  text-lg ml-6 flex flex-row"
                                style="font-weight: 600;font-size: 16px;">
                                <!-- {{ info.name }}
                                <div class="ml-10 w-20 text-center  text-white  bg-amber-400" style="font-size: 14px;">
                                    项目
                                </div> -->
                            </div>
                            <div class="flex flex-row">
                                <div class="w-32 ">
                                    <div class="mb-2">业务类型</div>
                                    <div style="font-weight: 600;">
                                        {{ xmtypes.find(x => x.value == info.type)?.label }}</div>
                                </div>
                                <div class="w-32 ">
                                    <div class="mb-2">商务负责人</div>
                                    <div style="font-weight: 600;">{{ info.directorName }}</div>
                                </div>
                                <div class="w-32">
                                    <div class="mb-2">项目经理</div>
                                    <div style="font-weight: 600;">{{ info.directorName }}</div>
                                </div>
                                <div class="w-48">
                                    <div class="mb-2">立项时间</div>
                                    <div style="font-weight: 600;">{{ info.createTime?.substr(0,10) }}</div>
                                </div>
                            </div>
                        </a-col>
                        <a-col :span="4" class="text-right">
                            <a-button @click="visible = false">返回</a-button>
                        </a-col>
                    </a-row>

                </a-col>


            </a-row>
        </a-card>
        <a-card>
            <a-tabs v-model:activeKey="activeKey">
                <a-tab-pane key="1" tab="详细信息">
                    <detail ref="pmDetail"></detail>
                </a-tab-pane>
                <a-tab-pane key="2" tab="投标">
                    <invitebid :proId="info.id"></invitebid>
                </a-tab-pane>
                <a-tab-pane key="3" tab="合同信息">
                    <contract :proId="info.id"></contract>
                </a-tab-pane>
                <a-tab-pane key="4" tab="成本预算">
                    <cost :proId="info.id"></cost>
                </a-tab-pane>
                <a-tab-pane key="5" tab="实际成本">
                    <realcost :proId="info.id"></realcost>
                </a-tab-pane>
                <a-tab-pane key="6" tab="签证信息">
                    <sign :proId="info.id"></sign>
                </a-tab-pane>
                <a-tab-pane key="7" tab="结算信息">
                    <settlement :proId="info.id"></settlement>
                </a-tab-pane>
                <a-tab-pane key="8" tab="回款信息">
                    <collection :proId="code"></collection>
                </a-tab-pane>
                <a-tab-pane key="9" tab="资料信息">
                    <files :value="info"></files>
                </a-tab-pane>
                <a-tab-pane key="10" tab="审核流程">
                    <taskInfo :id="info.processId">
                    </taskInfo>
                </a-tab-pane>
            </a-tabs>
        </a-card>
    </a-drawer>
</template>
<script setup>
import { xmtypes, tbtypes, progressOptions } from '@/utils/constants.js'
import taskInfo from '@/components/Task/info.vue'
// import files from '@/views/data/dataCenter.vue'
import detail from './details.vue'
import invitebid from './invitebid.vue'
import contract from './contract.vue'
import cost from './cost.vue'
import realcost from './realcost.vue'
import sign from './sign.vue'
import collection from './collection.vue'
import settlement from './settlement.vue'
import steps from '@/views/pm/index/components/step.vue'


import files from './files.vue'
const pmDetail = ref()
const activeKey=ref("1");
const visible = ref(false)
const code = ref('')
const info = ref({})
const show = (data) => {
    activeKey.value = '1'
    visible.value = true
    pmDetail.value.show(data)
    info.value = { ...data }
}
defineExpose({
    show
});


const emits = defineEmits(['OnClose'])
const onClose = () => {
    show.value = false;
    emits('OnClose', 'Hello Parent!')
};



</script>

<style scoped></style>